<template>
  <div class="query">
    <div class="LOGO">
      <div class="logoImg">
        <img class="logo1 animated bounceInDown" src="../images/logo.png">
        <h1 style="margin-left: 150px;font-size:30px">统计地理画像</h1>
      </div>
      <div class="logoMenu">
        <div class="menu1 menu-btn widget-btn" title="统计图表" @click="showChart()" >
          <span></span>
          <div class="menuMask"></div>
        </div>
        <div class="menu2 menu-btn widget-btn" title="查询企业" @click="showListView()" >
          <span></span>
          <div class="menuMask"></div>
        </div>
        <div class="menu3 menu-btn" title="详细规划图">
          <span></span>
          <div class="menuMask"></div>
        </div>
        <div class="menu4 menu-btn" title="更多">
          <span></span>
          <div class="menuMask"></div>
        </div>
        <ul id="menu3Child" class="menu4-ul" style="left: 220px;right:auto;">
          <li id="menu-step-2" onclick="showMapLayer(401087)">
            <i class="fa fa-location-arrow"></i>详细规划图
          </li>
          <li id="menu-step-3" onclick="showMapLayer(401085)">
            <i class="fa fa-location-arrow"></i>道路规划图
          </li>
          <li id="menu-step-3" onclick="showMapLayer(401086)">
            <i class="fa fa-location-arrow"></i>建筑物规划
          </li>
          <li class="widget-btn" data-widget="widgetsTS/qyTL/widget.js">
            <i class="fa fa-envelope-open"></i>规划图图例
          </li>
        </ul>
        <ul id="menu4Child" class="menu4-ul">
          <li class="widget-btn" onclick="haoutil.msg('无功能，仅演示菜单')">
            <i class="fa fa-calendar"></i>演示菜单
          </li>
          <li
            class="widget-btn"
            onclick="window.open('http://www.datafison.cn/ui/index2.html#!./page/system/menu/index.html')"
          >
            <i class="fa fa-bars"></i>系统管理
          </li>
        </ul>
      </div>
    </div>
    <div class="shousuoView animated bounceInDown">
      <span class="shousuoBtn">收缩</span>
    </div>

     <chartone v-if="status.showChart"></chartone>
     <charttwo v-if="status.showChart"></charttwo>
     <listView v-if="showListViewLayer"></listView>
    <detailView v-if="showDetailViewLayer"></detailView>
    <qyVideo v-if="showQyVideoLayer"></qyVideo>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import chartone from "../charts/chartone.vue"; 
import charttwo from "../charts/charttwo.vue";
import listView from "../listView/view.vue";
import detailView from "../listView/detailView.vue";
import qyVideo from "../listView/qyVideo.vue";

import sgisRegionBase from "@/utils/map/sfgis.region.base.js";
import sgisMapBase from "@/utils/map/sfgis.map.base.js";
import Layer from "@/utils/map/lib/main.js"; // 专题图层绘画函数
import searchresultData from "./searchresult.data.js";
import axios from "axios";
import authority from "static/js/authority.js";
import { setTimeout } from "timers";

import * as microAPI from "@/pages/micro/api/micro.js";
import microConfig from "static/config/micro.js";
import query from "static/config/query.js";

export default {
  name: "Query",
  components: {chartone,charttwo,listView,detailView,qyVideo},
  props: [],
  data() {
    return {
      status: {
        showChart:false
      },

      regions: {
        //区划
        rcid: "b16447f17919494c91476ab416548f8f", // 区划版本配置
        regionCodeType: 1, //行政区划类型
        regionArr: [
          {
            regionCode: config.regions.regionCode,
            regionLevel: config.regions.regionLevel,
            regionName: config.regions.regionName
          }
        ]
      },

    };
  },
  computed: {
    ...mapState({
      showListViewLayer: state => state.portrait.showListViewLayer,
      showDetailViewLayer: state => state.portrait.showDetailViewLayer,
      showQyVideoLayer:state => state.portrait.showQyVideoLayer
    })
  },
  watch: {
    contentVisible() {
      if (!this.contentVisible) {
        this.style = {
          height: "60px"
        };
      } else {
        this.style = {
          height: "100%"
        };
      }
      this.$emit("querystyle", this.style);
    }
  },
  mounted() {
    let that = this;
    //获取权限方法
    var userInfo = localStorage.getExpire("userInfo");
    var token_type = localStorage.getExpire("token_type");
    var access_token = localStorage.getExpire("access_token");

    if (userInfo && token_type && access_token) {
      that.Authorization = token_type + " " + access_token;
      that.microPower = JSON.parse(userInfo).permissions;

      // this.getRootMicroMenu();
    }
    EventBus.$on("updateRegions", this.updateRegions);
  },
  beforeDestroy() {
    EventBus.$off("updateRegions", this.updateRegions);
  },
  methods: {
    ...mapMutations(["changeListViewLayer","changeDetailViewLayer"]),
    //更新区划
    updateRegions(tagsdata) {
      let that = this;
      let regionsArr = [];
      for (let i = 0; i < tagsdata.length; i++) {
        let level = sgisRegionBase.regionUtils.getRegionLevel(
          tagsdata[i].regionCode || tagsdata[i].code
        );
        regionsArr.push({
          regionCode: tagsdata[i].regionCode || tagsdata[i].code, //区划代码
          regionName: tagsdata[i].name || tagsdata[i].shortName || "", //区划名称
          regionLevel: level //当前区划等级
        });
      }
      that.regions.regionArr = regionsArr;
    },
    //切换图表
    showChart(){
      this.status.showChart = !this.status.showChart;
      this.$store.commit("changeListViewLayer",false)
      this.$store.commit("changeDetailViewLayer",false)
    }, 
    showListView(){
      this.status.showChart = false;
      this.$store.commit("changeListViewLayer",true)
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import "../css/rule.scss";
 
@keyframes circle {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(-360deg);
    }
}

@keyframes circle2 {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
} 
.LOGO {
  width: 434px;
  height: 150px;
  padding: 5px 0 0 5px;
  position: absolute;
  top: 0;
  left: 0;
  background: url(../images/logoBg.png) no-repeat left top;
  // z-index: 19890101;
  .logoImg{
    height: 68px;
    padding: 7px;
    position: relative;
    box-sizing: border-box;
    .logo1 {
      top: 10px;
      margin-left: 15px;
      height: 70px;
      float: left;
    }
    h1{
      margin-left: 150px;
      font-size: 30px;
      color:$fontColorW;
      margin-top: 12px;
    }
  }
  .logoMenu{
    position: relative;
    .menu-btn{
      span {
        cursor: pointer;
        position: absolute;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
        z-index: 2;
      }
      .menuMask {
        position: absolute;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
        z-index: 1;
        background: url(../images/logoCir.png) no-repeat center;
        animation: circle2 2s infinite linear;
      }
    }
    .menu1 {
      position: absolute;
      left: 60px;
      top: 0px;
      width: 64px;
      height: 64px;
      background: url(../images/logobtn1.png) no-repeat center;
    }
    .menu2 {
      position: absolute;
      left: 137px;
      top: 0px;
      width: 64px;
      height: 64px;
      background: url(../images/logobtn3.png) no-repeat center;
    }
    .menu3 {
      position: absolute;
      left: 213px;
      top: 0px;
      width: 64px;
      height: 64px;
      background: url(../images/logobtn2.png) no-repeat center;
    }
    .menu4 {
      position: absolute;
      left: 290px;
      top: 0px;
      width: 64px;
      height: 64px;
      background: url(../images/logobtn4.png) no-repeat center;
    }
    .menu4-ul {
      padding: 2px 5px;
      display: none;
      position: absolute;
      top: 64px;
      right: 18px;
      background: rgba(0,48,64,0.60);
      li {
        cursor: pointer;
        height: 26px;
        line-height: 26px;
        min-width: 100px;
        margin-left: 3px;
        padding-left: 5px;
        text-align: left;
        color: #FFFFFF;
        font-size: 14px;
        i {
          margin-right: 10px;
        }
      }
      li.activate,li:hover {
        color: #4DFFFF;
      }
    }
  }
}
.shousuoView {
  // z-index: 20190601;
  position: absolute;
  left: 10px;
  top: 107px;
  .shousuoBtn{
    display: inline-block;
    cursor: pointer;
    height: 20px;
    line-height: 20px;
    width: 30px;
    text-align: center;
    color: #FFFFFF;
    font-size: 10px;
    background-color: #002835;
    border: 1px solid #72fdfd;
    border-radius: 3px;
  }
}
</style>
<style rel="stylesheet/scss" lang="scss">
@import "../css/rule.scss";
</style>

